<template>
	<div>
		<div class="qiu" :style="'transform: translate('+ x +'px,' + y +'px);'"  @click="toback" @touchstart="touchS" @touchmove.stop.prevent="touchM"  @touchend="touchE">
			<img class="img" src="~@/assets/back1.png" mode="" />
		</div>
	</div>
</template> 

<script>
export default {
	data() {
		return {
			start:{
				left:0,
				top:0
			},
			x:0,
			y:0,
			oldx:0,
			oldy:0,
		}
	},
	methods: {
    toback(){
			if(this.$route.query.from){
				history.back()
				return
			}
      if('companyListparkListpListproListrcczjczs_proListzs_xs'.indexOf(this.$route.name)>-1){
        this.$router.push('home');
      }else{
        this.$router.go(-1)
      }
    },
		touchS(val){
			this.isMove=true
			this.start.left = val.changedTouches[0].clientX 
			this.start.top = val.changedTouches[0].clientY 
		},
		touchM(val){
			if(this.isMove==false){
				return
			}
			this.x = this.oldx + val.changedTouches[0].clientX  - this.start.left 
			this.y = this.oldy + val.changedTouches[0].clientY  - this.start.top 
		},
		touchE(val){
			this.x=0
			this.oldx=this.x
			this.oldy=this.y
			this.isMove=false
		},
	}
};
</script>

<style scoped lang="scss">
.qiu{
	position: fixed;
	bottom: 25%;
	right: 0px;
	width: 48px;
	height: 48px;
	z-index:99;
	border-radius: 24px;
	// background:linear-gradient(270deg,rgba(255, 251, 0, 0.9) 0%,rgba(255,168,42,1) 100%);
	transition-property: right,top,height,width;
	transition-duration:0.5s;
	display: flex;
	justify-content: center;
	align-items: center;
  // box-shadow: -2px 3px 5px rgb(255 255 255 / 60%) inset, 2px -3px 5px rgb(0 0 0 / 20%) inset;
  box-shadow: 0 2px 10px 0 rgba($color: #000000, $alpha: .3);
	.img{
		width: 48px;
	  height: 48px;
		transition: all 0.4s;
	}
}
</style>